<template>
  <div class="login">
    <div class="login_warp">
      <ul class="menu_tab">
        <li
          :class="{ current: item.current }"
          v-for="(item, index) in menuTab"
          :key="index"
          @click="toggleMenu(item)"
        >
          {{ item.txt }}
        </li>
      </ul>
      <!-- 表单验证 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="login_form"
        size="medium"
      >
        <el-form-item prop="username" class="item_form">
          <label>邮箱</label>
          <el-input
            type="username"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" class="item_form">
          <label>密码</label>
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            maxlength="20"
            minlength="6"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="passwords"
          class="item_form"
          v-show="model === 'register'"
        >
          <label>重复密码</label>
          <el-input
            type="password"
            v-model="ruleForm.passwords"
            autocomplete="off"
            maxlength="20"
            minlength="6"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code" class="item_form">
          <label>验证码</label>
          <el-row :gutter="20">
            <el-col :span="15"
              ><el-input
                v-model.number="ruleForm.code"
                maxlength="6"
                minlength="6"
              ></el-input>
              <div class="grid-content bg-purple"></div
            ></el-col>
            <el-col :span="9"
              ><el-button type="success" class="block">获取验证码</el-button>
              <div class="grid-content bg-purple"></div
            ></el-col>
          </el-row>
        </el-form-item>
        <el-form-item class="item_form">
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            class="login_btn block"
            round
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { checkObject } from "../../utils/validate.js";
export default {
  name: "login",
  data() {
    var validate = {
      //验证邮箱
      validateUsername: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入邮箱"));
        } else if (checkObject().checkEmail(value)) {
          callback(new Error("邮箱格式有误"));
        } else {
          callback();
        }
      },
      //验证密码
      validatePassword: (rule, value, callback) => {
        this.ruleForm.password = checkObject().stripscript(value);
        value = this.ruleForm.password;
        if (value === "") {
          callback(new Error("请输入密码"));
        } else if (checkObject().checkPassword(value)) {
          callback(new Error("密码格式为6至20位字母、数字、下划线"));
        } else {
          callback();
        }
      },
      //验证重复密码
      validatePasswords: (rule, value, callback) => {
        this.ruleForm.passwords = checkObject().stripscript(value);
        value = this.ruleForm.passwords;
        if (value === "") {
          callback(new Error("请输入第二次密码"));
        } else if (value != this.ruleForm.password) {
          callback(new Error("两次密码不一致"));
        } else {
          callback();
        }
      },
      //验证验证码
      checkCode: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("验证码不能为空"));
        } else if (checkObject().checkCode(value)) {
          callback(new Error("验证码格式有误"));
        } else {
          callback();
        }
      }
    };
    return {
      menuTab: [
        { txt: "登录", current: true, type: "login" },
        { txt: "注册", current: false, type: "register" }
      ],
      model: "regsiter",
      //表单数据
      ruleForm: {
        username: "",
        password: "",
        passwords: "",
        code: ""
      },
      rules: {
        username: [{ validator: validate.validateUsername, trigger: "blur" }],
        password: [{ validator: validate.validatePassword, trigger: "blur" }],
        passwords: [{ validator: validate.validatePasswords, trigger: "blur" }],
        code: [{ validator: validate.checkCode, trigger: "blur" }]
      }
    };
  },
  methods: {
    toggleMenu(data) {
      this.model = data.type;
      this.menuTab.forEach(ele => {
        ele.current = false;
      });
      data.current = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
//scoped代表局部样式，避免影响其他页面
.current {
  background-color: rgba(0, 0, 0, 0.1);
}
.login {
  height: 100vh;
  background-color: #344a5f;
  .login_warp {
    width: 330px;
    margin: auto;
    .menu_tab {
      text-align: center;
      li {
        display: inline-block;
        width: 88px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
      }
    }
    .login_form {
      margin-top: 29px;
      label {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
        color: #fff;
      }
      .item_form {
        margin-bottom: 13px;
      }
      .block {
        display: block;
        width: 100%;
      }
      .login_btn {
        margin-top: 10px;
      }
    }
  }
}
</style>